<template>
  <p-modal
    v-model="visible"
    :title="title"
    :width="1000"
    :mask-closable="false"
    :body-style="{
      height: '530px',
    }"
    :dialog-style="{ top: '40px' }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="content-container">
      <div class="connect_div">
        <div class="form_one">
          <div class="input_div">
            <p-input
              v-model="form.legalNo"
              class="input"
              placeholder="请输入"
            />
            <span class="label">法人编号</span>
          </div>
          <div class="input_div">
            <p-input
              v-model="form.legalName"
              class="input"
              placeholder="请输入"
            />
            <span class="label">法人名称</span>
          </div>
          <div class="input_div">
            <p-button
              class="button"
              type="primary"
              style="height: 32px !important; margin-left: 60px"
              @click="search"
            >
              搜索
            </p-button>
            <p-button
              class="button"
              style="height: 32px !important"
              @click="reset"
            >
              重置
            </p-button>
          </div>
        </div>
      </div>
      <p-table
        class="table-list-container"
        row-key="id"
        :columns="columns"
        bordered
        :scroll="{ x: 1400, y: 300 }"
        :data-source="dataSource"
        :pagination="paginationMixin"
        :row-selection="rowSelectionMixin"
        @change="handleTableChange"
      >
        <a
          slot="serialNumber"
          slot-scope="text, record"
          @click="$emit('number-click', record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </p-modal>
</template>

<script>
import { postOpportunityList, getLegalNoList } from '@/api/order.js';
import mixinTable from '@/mixins/mixin-table.js';
const defaultForm = {
  legalName: '',
  legalNo: '',
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择法人',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
    customerCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      form: {
        ...defaultForm,
      },
      orgGroupOptions: [],
      dataSource: [],
    };
  },

  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '法人编号',
          dataIndex: 'legalNo',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '法人名称',
          dataIndex: 'legalName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '付款条件和账期',
          dataIndex: 'settlementPeriod',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建人',
          dataIndex: 'createUserName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {
    // dataSource: {
    //   handler(val) {},
    //   deep: true,
    // },
    visible: {
      handler(val) {
        val && this.legalNoList();
      },
    },
  },
  created() {
    this.rowSelectionMixin.type = 'radio';
  },
  methods: {
    handleOrgChange(val) {
      this.form.salesGroup = '';
      this.orgGroupOptions = [];
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.paginationMixin = page;
      this.legalNoList();
    },
    async legalNoList() {
      const data = {
        customerNo: this.customerCode,
        ...this.form,
        asc: this.asc,
        column: this.columnKey,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
      };
      const result = await getLegalNoList(data);
      this.dataSource = result?.data?.data.records;
      this.paginationMixin.total = result?.data?.data?.total;
    },
    search() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.legalNoList();
    },
    reset() {
      this.form = { ...defaultForm };
      this.rowSelectionMixin.selectedRowKeys = [];
      this.legalNoList();
    },
    handleCancel() {
      this.rowSelectionMixin.selectedRowKeys = [];
      this.$emit('update:visible', false);
      this.$emit('cancel', false);
    },
    handleOk() {
      const keys = this.rowSelectionMixin.selectedRowKeys;
      if (!keys.length) {
        this.$message.error('请选择法人！');
        return;
      }
      const current = this.dataSource.find((item) => item.id === keys[0]);
      this.$emit(
        'change',
        { key: current.legalNo, label: current.legalName },
        this.index
      );
      this.handleCancel();
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  // width: 100%;
  // display: flex;
  // align-items: center;
  // font-size: 20px;
  // .content {
  //   display: flex;
  //   justify-content: center;
  //   flex: 1;
  // }

  .table-list-container {
    margin-top: 20px;
  }

  .poros-form {
    padding: 10px 20px;
    width: 100%;
    border-bottom: 1px solid #e5e6e9;
  }
  .poros-form-item {
    width: 30%;
    margin-bottom: 10px;
  }
  /deep/ .poros-form-item-control-wrapper {
    width: calc(100% - 70px);
  }
  .btn-search {
    margin-right: 16px;
  }
}
.connect_div {
  width: 100%;
  background-color: #f7f7f8;
  height: 50px;
  margin-bottom: 20px;
}

.form_one {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-around;
}
.input_div {
  width: 40% !important;
  line-height: 30px;
  margin-top: 7.5px;
}
.input {
  width: 60% !important;
  float: right;
}
.label {
  float: right;
  margin-right: 10px;
}
.button {
  margin-left: 10px;
}
</style>
